<template>
  <div style="height: 100%;overflow-y: auto">
    <div style="">
      <div class="title" style="width: 100%">
        <div class="title-mark"></div>
        <div class="title-text">数量统计</div>
        <div style="clear: both"></div>
      </div>
      <div style="padding-right: 20px;display: flex;gap: 15px;flex-flow: wrap">
        <div class="show-gather-item">
          <div class="show-gather-item-name">下游建链</div>
          <div class="show-gather-item-content">{{state.Net1_connect_num}}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">上行接收报文</div>
          <div class="show-gather-item-content">{{state.Net1_packet_num}}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">上行统计</div>
          <div class="show-gather-item-content">{{ downCount }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">上行建链</div>
          <div class="show-gather-item-content">{{ state.Host_Pcie_pf1linkup }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">下行输入统计</div>
          <div class="show-gather-item-content">{{ downCount }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">下行输出统计</div>
          <div class="show-gather-item-content">{{ state.Zynq_Net2_num }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">TCP包数</div>
          <div class="show-gather-item-content">{{ state.Total_Tcp_packets }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">UDP包数</div>
          <div class="show-gather-item-content">{{ state.Total_Udp_packets }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">异常包数</div>
          <div class="show-gather-item-content">{{ rejectedCount }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">拒止包数</div>
          <div class="show-gather-item-content">{{ rejectedCount }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">减轻负担</div>
          <div class="show-gather-item-content">{{ burden }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">总流量包数</div>
          <div class="show-gather-item-content">{{ state.Total_packets }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">总流量字节数</div>
          <div class="show-gather-item-content">{{ state.Total_bytes }}</div>
        </div>
        <div class="show-gather-item" style="width: auto;min-width: 150px;max-width: 450px;">
          <div class="show-gather-item-name">敏感词</div>
          <div class="show-gather-item-content" style="line-height: unset">{{ sensitiveWords }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">敏感词算法软件版本</div>
          <div class="show-gather-item-content">{{ state.Algorithm_version }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">ZYNQ缓存包数</div>
          <div class="show-gather-item-content">{{ state.ZYNQ_packet_num }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">ZYNQ缓存字节</div>
          <div class="show-gather-item-content">{{ state.ZYNQ_byte_num }}</div>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div >
      <div class="title" style="width: 100%">
        <div class="title-mark"></div>
        <div class="title-text">状态采集</div>
        <div style="clear: both"></div>
      </div>
      <div style="padding-right: 20px;display: flex;gap: 15px;flex-flow: wrap">
        <div class="show-gather-item">
          <div class="show-gather-item-name">最近裁决方式</div>
          <div class="show-gather-item-content1">{{lastVerdictStrategy}}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">最近裁决结果</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Last_verdict_result == 1 ? "成功" : "失败"}}</div>
        </div>
<!--        <div class="show-gather-item">
          <div class="show-gather-item-name">下发报文状态</div>
          <div class="show-gather-item-content1" style="color: green">成功</div>
        </div>-->
        <div class="show-gather-item">
          <div class="show-gather-item-name">拟态判决</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Mimic_ready == 1 ? "可用" : "不可用" }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">uart状态</div>
         <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Uart_usable == '1' ? "正常" : "不可用" }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">程序烧录状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ready == undefined ? "" : ( state.ZYNQ_ready == '1' ? "完成" : "进行中") }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">SPI Flash</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Zynq_OS_ready == '1' ? '存在' : '不存在' }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核1自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM0_ready == '1' ? '正常' : '异常' }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核2自举状态</div>
        <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM1_ready == '1' ? '正常' : '异常' }}</div>
          <div class="show-gather-item-content1"></div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核3自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM2_ready == '1' ? '正常' : '异常' }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核4自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM3_ready == '1' ? '正常' : '异常' }}</div>
        </div>
<!--        <div class="show-gather-item">
          <div class="show-gather-item-name">异常包标识</div>
          <div class="show-gather-item-content1">QWRRT</div>
        </div>-->
       <div class="show-gather-item">
          <div class="show-gather-item-name">异常流量状态</div>
          <div class="show-gather-item-content1" :style="{
            color: rejectedCount  <= 0  ? 'green' : 'red'
          }">{{ rejectedCount  <= 0 ? '无异常' : '有异常' }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">网络状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.network_sate == 1 ? 'green' : 'red'
          }">{{ state.network_sate == '1' ? '正常' : '异常' }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">敏感词算法软件</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Algorithm_state == 1 ? 'green' : 'red'
          }">{{ state.Algorithm_state == '1' ? '正常' : '异常' }}</div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div style="width: 100%;height: 530px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">FPGA报文</div>
        </div>
        <div  style="width: 100%;height: calc(100% - 80px)">
          <table class="docker-container-top-table">
            <tbody>
            <tr>
              <td>类型</td>
              <td>源目的IP</td>
              <td>源目的端口</td>
              <td>时间</td>
            </tr>
            <tr v-for="(item, index ) in fagaDataInfo">
              <td>{{item.type}}</td>
              <td>{{item.ip}}</td>
              <td>{{item.port}}</td>
              <td>{{item.time}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">态势感知</div>
          <div style="clear: both"></div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
          <div ref="echartLineRef" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 200px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">最近TCP报文</div>
        </div>
        <div  style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">最近HTTP报文</div>
        </div>
        <div  style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 200px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">网口1Payload</div>
        </div>
        <div  style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">网口2Payload</div>
        </div>
        <div  style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, inject, onMounted, onUnmounted, reactive, ref} from "vue";
import * as echarts from "echarts";
import {AXIOS_NAME} from "@/constant/constant.js";
import Table from "@/components/plugs/table/Table.vue";

const state = reactive({});
const burden =ref("0%");

const lastVerdictStrategy = computed(() => {
  if(state.Last_verdict_strategy == 0){
    return "多数裁决";
  }else if(state.Last_verdict_strategy == 1) {
    return  "加权多数判决";
  }else if(state.Last_verdict_strategy == 2){
    return "快速比对判决"
  }
  return "";
});
const rejectedCount = computed(() => {
   if(state.rejected_flows == undefined){
     return 0;
   }
   let count = 0;
   for(const item of state.rejected_flows){
     count += item.count
   }
   let temp = (count / state.Total_packets * 100).toFixed(2);
   burden.value = temp + "%";
   return count;
});

const downCount = computed(() => {
  if(state.docker_connections == undefined){
    return 0;
  }
  let count = 0;
  for(const item of state.docker_connections){
    count += item.Zynq_docker_num
  }
  return count;
});

const sensitiveWords = computed(() => {
  if(state.top_sensitive_words == undefined || state.top_sensitive_words.lenght <= 0){
    return "";
  }
  let temp = "";
  for(const  item of state.top_sensitive_words){
     temp += item.word + "["+item.count+"],";
  }
  if(temp.indexOf(",") != -1){
    temp = temp.substring(0,temp.lastIndexOf(","));
  }
  return temp;
});


const fagaDataInfo = reactive([]);
for(let i = 0;i < 11;i++){
  fagaDataInfo.push({"type": "输入","ip":"172.0.0.1","port":"2003","time":"2025-06-25 11:32:32"});
}
const $axios = inject(AXIOS_NAME);
const echartLineRef = ref(null);
let lineChart;
let interval;

onMounted(() => {
  lineChart = echarts.init(echartLineRef.value);
  //getEchartData();
  getFirstPageState();
});

onUnmounted(() => {
  if (interval) {
    clearInterval(interval);
  }
})
interval = setInterval(function () {
 // getEchartData();
  getFirstPageState();
}, 3000)
const getEchartData = () => {
  $axios.post("/monitor/getLinuxBaseInfo", {}).then(response => {
    const data = response.data;
    console.log(data);
    if (data.code != 1 || data.data.length <= 0) {
      return;
    }
    const lastData = data.data[0];
    handleLineEchart(data.data);
  });
}

const getFirstPageState = () =>{
  $axios.post("/first/getFirstPageGatherData",{"type":"state_count"}).then(response => {
    const data = response.data;
    console.log(data);
    for(let key in data.data){
      state[key] = data.data[key];
    }
  });
}

const handleLineEchart = (data) => {
  let xAxis = [];
  let revData = [];
  let senData = [];
  data.forEach((item, index) => {
    xAxis.push((index + 1) + "s");
    revData.push(item.networkIn);
    senData.push(item.networkOut);
  });
  let options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['次数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value',
      axisLabel: { //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
        formatter: '{value}s'
      }
    },
    series: [
      {
        name: '次数',
        type: 'line',
        stack: 'Total',
        data: revData
      }
    ]
  };
  lineChart.setOption(options);
}
</script>

<style scoped>
.title{
  height: 50px;width: 49%;margin-top: 15px;
}
.title-mark{
  width: 5px;height: 30px;background-color: #409eff;float: left
}
.title-text{
  width: 70%;height: 30px;font-size: 18px;font-weight: bold;margin-left: 10px;
  line-height: 30px;color: #797B7C
}
.show-gather-item {
  width: 150px;
  height: 95px;
  border: 1px solid #CACACA;
  border-radius: 5px;
}

.show-gather-item-name {
  width: 100%;
  height: 25px;
  text-align: center;
  line-height: 25px;
  color: #949494;
  font-size: 15px;
}

.show-gather-item-content {
  width: 100%;
  height: 70px;
  font-size: 25px;
  position: relative;
  text-align: center;
  line-height: 70px;
  color: #020202;
}

.show-gather-item-content1 {
  width: 100%;
  height: 70px;
  font-size: 25px;
  position: relative;
  text-align: center;
  line-height: 70px;
  color: #020202;
}
.docker-container-top-table{
  width: 100%;
  text-align: left;
  border: 0px;
  border-collapse: collapse;
}
.docker-container-top-table tr,thead{
  height: 35px;
  border-bottom: 1px solid #F0F0F0;
}
</style>